<template>
    <div calss="AdminTable">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="account" label="工号"> </el-table-column>
        <el-table-column prop="phone" label="手机号"> </el-table-column>
        <el-table-column label="身份">
          <template slot-scope="scope">
            <span class="admin" v-if="scope.row.role === 'admin'">{{
              scope.row.role.toUpperCase()
            }}</span>
            <span class="superAdmin" v-if="scope.row.role === 'superAdmin'">{{
              scope.row.role.toUpperCase()
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="管理宿舍">
          <template slot-scope="scope">
            <div class="room-wrap" v-if="scope.row.role === 'admin'">
              <el-button   @click="selectrooms(scope.row)">查看</el-button>
              <span v-for="building in scope.row.buildings" :key="building.id">
                {{ building.name+ building.region}}
              </span>
            </div>
            <div class="all-room" v-else>
              所有宿舍
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="管理宿舍" :visible.sync="dialogVisible" width="800px" height="800px">
        <el-select v-model="buildingId" placeholder="请选择" @change="selectInspectType()" :clearable="true">
            <el-option
              v-for="item in buildings"
              :key="item.id"
              :label="item.name+item.region"
              :value="item.id"
            >
            </el-option>
          </el-select>
        <FloorInfoCard
          v-for="floor in floorsData" 
          :floor-info="floor"
          :key="generateKey(floor)"
        />
      </el-dialog>
    </div>
    
  </template>
  
  <script>
  import FloorInfoCard from './FloorInfoCard'
  import BuildingAddForm from './BuildingAddForm'
  import { getFloorsDetail } from '@/api/floor'
  
  export default {
    name: 'AdminTable',
    components: {
      FloorInfoCard,
      BuildingAddForm
    },
    data() {
      return {
        dialogVisible:false,
        buildingId: null,
        floorsData: [],
        buildings:null,
        userId:null,
       
      }
    },
    props: {
      tableData: {
        type: Array,
        default: () => []
      }
    },
    mounted() {
  
  
  },
  methods: {
  
  }
  
  }
  </script>
  
  <style lang="scss" scoped>
  .admin {
    color: $color-primary;
  }
  .superAdmin {
    color: $color-origin;
  }
  .room-wrap {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
    span {
      display: block;
      margin: 5px 10px;
    }
  }
  .all-room {
    color: rgba($color: #000000, $alpha: 0.3);
  }
  </style>
  